<template>
  <div class="popup-style-form">
    <el-form 
      ref="formRef" 
      :model="form" 
      :rules="rules" 
      label-width="120px"
      @submit.prevent="handleSubmit"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="样式名称" prop="name" required>
            <el-input 
              v-model="form.name" 
              placeholder="请输入样式名称"
              maxlength="50"
              show-word-limit
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="站点" prop="siteId" required>
            <el-select 
              v-model="form.siteId" 
              placeholder="请选择站点" 
              style="width: 100%"
            >
              <el-option 
                v-for="site in sites" 
                :key="site.id" 
                :label="site.name" 
                :value="site.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 位置和尺寸设置 -->
      <el-divider content-position="left">位置和尺寸</el-divider>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="弹窗位置" prop="position" required>
            <el-select v-model="form.position" placeholder="请选择弹窗位置" style="width: 100%">
              <el-option label="左上角" value="top_left" />
              <el-option label="顶部居中" value="top_center" />
              <el-option label="右上角" value="top_right" />
              <el-option label="居中" value="center" />
              <el-option label="左下角" value="bottom_left" />
              <el-option label="底部居中" value="bottom_center" />
              <el-option label="右下角" value="bottom_right" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="宽度" prop="width" required>
            <el-input-number 
              v-model="form.width" 
              :min="200" 
              :max="800" 
              placeholder="宽度"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="高度" prop="height" required>
            <el-input-number 
              v-model="form.height" 
              :min="150" 
              :max="600" 
              placeholder="高度"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 颜色和边框设置 -->
      <el-divider content-position="left">颜色和边框</el-divider>
      
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="背景颜色" prop="backgroundColor" required>
            <el-color-picker 
              v-model="form.backgroundColor" 
              show-alpha
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="边框颜色" prop="borderColor" required>
            <el-color-picker 
              v-model="form.borderColor" 
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="边框宽度" prop="borderWidth" required>
            <el-input-number 
              v-model="form.borderWidth" 
              :min="0" 
              :max="10" 
              placeholder="边框宽度"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="圆角大小" prop="borderRadius" required>
            <el-input-number 
              v-model="form.borderRadius" 
              :min="0" 
              :max="50" 
              placeholder="圆角大小"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="阴影效果">
            <el-switch v-model="form.shadow" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="动画类型" prop="animation" required>
            <el-select v-model="form.animation" placeholder="请选择动画" style="width: 100%">
              <el-option label="淡入" value="fade" />
              <el-option label="滑动" value="slide" />
              <el-option label="缩放" value="zoom" />
              <el-option label="弹跳" value="bounce" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="动画时长" prop="animationDuration" required>
        <el-input-number 
          v-model="form.animationDuration" 
          :min="100" 
          :max="2000" 
          :step="100"
          placeholder="动画时长"
          style="width: 200px;"
        />
        <span class="form-tip">毫秒</span>
      </el-form-item>

      <!-- 关闭按钮设置 -->
      <el-divider content-position="left">关闭按钮</el-divider>
      
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="显示关闭按钮">
            <el-switch v-model="form.closeButton.show" />
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="form.closeButton.show">
          <el-form-item label="按钮位置" prop="closeButton.position">
            <el-select 
              v-model="form.closeButton.position" 
              placeholder="请选择位置" 
              style="width: 100%"
            >
              <el-option label="右上角" value="top_right" />
              <el-option label="左上角" value="top_left" />
              <el-option label="右下角" value="bottom_right" />
              <el-option label="左下角" value="bottom_left" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="form.closeButton.show">
          <el-form-item label="按钮样式" prop="closeButton.style">
            <el-select 
              v-model="form.closeButton.style" 
              placeholder="请选择样式" 
              style="width: 100%"
              @change="handleCloseButtonStyleChange"
            >
              <el-option label="文字" value="text" />
              <el-option label="图标" value="icon" />
              <el-option label="图片" value="image" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 关闭按钮详细设置 -->
      <div v-if="form.closeButton.show" class="close-button-settings">
        <el-row :gutter="20">
          <el-col :span="8" v-if="form.closeButton.style === 'text'">
            <el-form-item label="按钮文字" prop="closeButton.text">
              <el-input 
                v-model="form.closeButton.text" 
                placeholder="请输入按钮文字"
                maxlength="10"
                show-word-limit
              />
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="form.closeButton.style === 'icon'">
            <el-form-item label="图标类型" prop="closeButton.icon">
              <el-select v-model="form.closeButton.icon" placeholder="请选择图标" style="width: 100%">
                <el-option label="关闭" value="close" />
                <el-option label="叉号" value="times" />
                <el-option label="退出" value="exit" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="form.closeButton.style === 'image'">
            <el-form-item label="图片地址" prop="closeButton.imageUrl">
              <el-input 
                v-model="form.closeButton.imageUrl" 
                placeholder="请输入图片地址"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 自定义CSS -->
      <el-divider content-position="left">自定义样式</el-divider>
      
      <el-form-item label="自定义CSS">
        <el-input 
          v-model="form.customCSS" 
          type="textarea" 
          :rows="6"
          placeholder="请输入自定义CSS代码"
          maxlength="1000"
          show-word-limit
        />
        <div class="form-tip">可以添加自定义的CSS样式来进一步定制弹窗外观</div>
      </el-form-item>

      <!-- 样式预览 -->
      <el-divider content-position="left">样式预览</el-divider>
      
      <div class="style-preview-container">
        <div class="preview-header">
          <span>实时预览</span>
          <el-button size="small" @click="refreshPreview">刷新预览</el-button>
        </div>
        <div class="preview-area">
          <div 
            class="preview-popup" 
            :style="getPreviewStyle()"
            :class="`animation-${form.animation}`"
          >
            <div class="preview-header-content">
              <h3>弹窗标题</h3>
              <button 
                v-if="form.closeButton.show" 
                class="preview-close-btn"
                :style="getCloseButtonStyle()"
              >
                {{ getCloseButtonContent() }}
              </button>
            </div>
            <div class="preview-body-content">
              <p>这是弹窗内容预览区域</p>
              <button class="preview-action-btn">操作按钮</button>
            </div>
          </div>
        </div>
      </div>

      <el-form-item>
        <el-button type="primary" @click="handleSubmit" :loading="submitting">
          保存
        </el-button>
        <el-button @click="$emit('cancel')">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import type { Site, PopupStyleForm } from '@/types/sitePopup'

// Props
interface Props {
  form: PopupStyleForm
  sites: Site[]
}

const props = defineProps<Props>()

// Emits
const emit = defineEmits<{
  submit: [PopupStyleForm]
  cancel: []
}>()

// 响应式数据
const formRef = ref<FormInstance>()
const submitting = ref(false)

// 表单验证规则
const rules: FormRules = {
  name: [
    { required: true, message: '请输入样式名称', trigger: 'blur' },
    { min: 2, max: 50, message: '样式名称长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  siteId: [
    { required: true, message: '请选择站点', trigger: 'change' }
  ],
  position: [
    { required: true, message: '请选择弹窗位置', trigger: 'change' }
  ],
  width: [
    { required: true, message: '请设置弹窗宽度', trigger: 'blur' }
  ],
  height: [
    { required: true, message: '请设置弹窗高度', trigger: 'blur' }
  ],
  backgroundColor: [
    { required: true, message: '请选择背景颜色', trigger: 'change' }
  ],
  borderColor: [
    { required: true, message: '请选择边框颜色', trigger: 'change' }
  ],
  borderWidth: [
    { required: true, message: '请设置边框宽度', trigger: 'blur' }
  ],
  borderRadius: [
    { required: true, message: '请设置圆角大小', trigger: 'blur' }
  ],
  animation: [
    { required: true, message: '请选择动画类型', trigger: 'change' }
  ],
  animationDuration: [
    { required: true, message: '请设置动画时长', trigger: 'blur' }
  ]
}

// 监听关闭按钮样式变化
watch(() => props.form.closeButton.style, () => {
  // 重置相关字段
  props.form.closeButton.text = undefined
  props.form.closeButton.icon = undefined
  props.form.closeButton.imageUrl = undefined
})

// 方法
const handleCloseButtonStyleChange = () => {
  // 根据样式设置默认值
  switch (props.form.closeButton.style) {
    case 'text':
      props.form.closeButton.text = '×'
      break
    case 'icon':
      props.form.closeButton.icon = 'close'
      break
    case 'image':
      props.form.closeButton.imageUrl = ''
      break
  }
}

const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    submitting.value = true
    
    emit('submit', { ...props.form })
  } catch (error) {
    console.error('表单验证失败:', error)
  } finally {
    submitting.value = false
  }
}

const refreshPreview = () => {
  // 触发预览更新
}

// 预览样式方法
const getPreviewStyle = () => {
  return {
    width: `${props.form.width}px`,
    height: `${props.form.height}px`,
    backgroundColor: props.form.backgroundColor,
    border: `${props.form.borderWidth}px solid ${props.form.borderColor}`,
    borderRadius: `${props.form.borderRadius}px`,
    boxShadow: props.form.shadow ? '0 4px 12px rgba(0,0,0,0.15)' : 'none',
    animationDuration: `${props.form.animationDuration}ms`
  }
}

const getCloseButtonStyle = () => {
  const position = props.form.closeButton.position
  const styles: Record<string, string> = {
    'top_right': 'position: absolute; top: 10px; right: 10px;',
    'top_left': 'position: absolute; top: 10px; left: 10px;',
    'bottom_right': 'position: absolute; bottom: 10px; right: 10px;',
    'bottom_left': 'position: absolute; bottom: 10px; left: 10px;'
  }
  
  return styles[position] || styles['top_right']
}

const getCloseButtonContent = () => {
  switch (props.form.closeButton.style) {
    case 'text':
      return props.form.closeButton.text || '×'
    case 'icon':
      return props.form.closeButton.icon === 'close' ? '✕' : '×'
    case 'image':
      return '图'
    default:
      return '×'
  }
}
</script>

<style scoped>
.popup-style-form {
  padding: 20px 0;
}

.form-tip {
  margin-top: 8px;
  color: #909399;
  font-size: 12px;
}

.close-button-settings {
  margin: 16px 0;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.style-preview-container {
  margin: 20px 0;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.preview-area {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 20px;
  position: relative;
}

.preview-popup {
  position: relative;
  background: white;
  overflow: hidden;
  transition: all 0.3s ease;
}

.preview-header-content {
  padding: 15px;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.preview-header-content h3 {
  margin: 0;
  color: #303133;
  font-size: 16px;
}

.preview-close-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #909399;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.preview-close-btn:hover {
  background-color: #f0f0f0;
  color: #606266;
}

.preview-body-content {
  padding: 20px;
  text-align: center;
}

.preview-body-content p {
  margin: 0 0 15px 0;
  color: #606266;
}

.preview-action-btn {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.preview-action-btn:hover {
  background-color: #337ecc;
}

/* 动画样式 */
.animation-fade {
  animation: fadeIn 0.3s ease-in-out;
}

.animation-slide {
  animation: slideIn 0.3s ease-in-out;
}

.animation-zoom {
  animation: zoomIn 0.3s ease-in-out;
}

.animation-bounce {
  animation: bounceIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes zoomIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes bounceIn {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.05); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); opacity: 1; }
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

:deep(.el-divider__text) {
  font-weight: 600;
  color: #303133;
}

:deep(.el-color-picker) {
  width: 100%;
}

:deep(.el-color-picker__trigger) {
  width: 100%;
  height: 40px;
}
</style>
